import moment from 'moment';
class FormItem {
    constructor(key, name, tag) {
        // 随机ID
        this.id = (Math.random() + '').substr(2);
        // 组件CODE
        this.key = key;
        // 组件名称
        this.name = name;
        // 组件html标签
        this.tag = tag;
        // 组件字段标签
        this.label = '';
        // 组件字段名
        this.field = '';
        // 组件字段标签占宽
        this.labelSpan = 6;
        // 组件占宽
        this.wrapperSpan = 18;
        // 组件字段标签是否显示
        this.show = true;
        // 组件是否启用
        this.enable = true;
        // 组件字段是否必填
        this.required = true;
        // 组件字段正则校验
        this.reg = '^.*$';
        // 组件字段校验提示
        this.message = '不能为空';
        // 组件字段默认值
        this.value = '';
        // 组件图标
        this.icon = '';
        // 组件占位提示符
        this.placeholder = '';
        // 组件属性
        this.props = {};
        // 组件插槽
        this.slots = {};
        // 组件字段可选项
        this.options = '';
        // 组件事件
        this.events = {};
        // 组件创建后回调
        this.afterCreate = function() {}.bind(this);
    }
    // 获取字符串格式字段值
    get valueStr() {
        return this.value instanceof Array ? this.value.join(',') : this.value;
    }
    // 给字段值赋值字符串格式值
    set valueStr(str) {
        if (this.value instanceof Array) {
            this.value = str.split(',');
        } else {
            this.value = str;
        }
    }
    // 深度克隆组件
    clone() {
        let temp = _.cloneDeep(this);
        temp.id = (Math.random() + '').substr(2);
        Object.entries(temp.slots).forEach(item => {
            temp.slots[item[0]].bind(temp);
        });
        Object.entries(temp.props).forEach(item => {
            if (typeof temp.props[item[0]] === 'function') {
                temp.props[item[0]].bind(temp);
            }
        });
        return temp;
    }
    // 设置字段值
    setValue(value) {
        this.value = value;
        return this;
    }
    // 设置组件图标
    setIcon(icon) {
        this.icon = icon;
        return this;
    }
    // 设置组件属性
    setProps(props) {
        this.props = props;
        return this;
    }
    // 设置组件可选项
    setOptions(options) {
        this.options = options;
        return this;
    }
    // 设置组件插槽
    setSlots(slots) {
        this.slots = slots;
        return this;
    }
    // 设置组件事件
    setEvents(events) {
        this.events = events;
        return this;
    }
}
// 行
const row = new FormItem('row', '行', 'Row').setIcon('pic-center').clone();
// 列
const col = new FormItem('col', '列', 'Col').setIcon('box-plot').clone();
// 文本
const text = new FormItem('text', '文本', 'span').setIcon('bold').clone();
// 输入框
const input = new FormItem('input', '输入框', 'a-input')
    .setIcon('italic')
    .setProps({ placeholder: '请输入' })
    .clone();
// 数字框
const number = new FormItem('number', '数值框', 'a-input-number')
    .setIcon('plus')
    .setProps({ min: 0, max: 9999 })
    .clone();
// 日期框
const date = new FormItem('date', '日期框', 'a-date-picker').setIcon('bulb').clone();
// 时间框
const time = new FormItem('time', '时间框', 'a-time-picker').setIcon('bulb').clone();
// 日期范围框
const dateRange = new FormItem('dateRange', '日期范围', 'a-range-picker')
    .setIcon('bulb')
    .setProps({
        showTime: {
            hideDisabledOptions: true,
            defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')]
        }
    })
    .clone();
// 下拉框
const select = new FormItem('select', '选择框', 'a-select')
    .setIcon('select')
    .setOptions('0-是,1-否')
    .setProps({
        placeholder: '请选择',
        options() {
            return this.options.split(',').map(item => {
                let temp = item.split('-');
                return { label: temp[1], value: temp[0] };
            });
        }
    })
    .clone();
// 单选框
const radioGroup = new FormItem('radioGroup', '单选框', 'a-radio-group')
    .setIcon('check-circle')
    .setOptions('0-是,1-否')
    .setProps({
        options() {
            return this.options.split(',').map(item => {
                let temp = item.split('-');
                return { label: temp[1], value: temp[0] };
            });
        }
    })
    .clone();
// 多选框
const checkBoxGroup = new FormItem('checkBoxGroup', '多选框', 'a-checkbox-group')
    .setValue([])
    .setIcon('menu')
    .setOptions('0-是,1-否')
    .setProps({
        options() {
            return this.options.split(',').map(item => {
                let temp = item.split('-');
                return { label: temp[1], value: temp[0] };
            });
        }
    })
    .clone();
// 图标
const icon = new FormItem('icon', '图标', 'i').setProps({ class: 'el-icon-upload' });
// 按钮
const button = new FormItem('button', '按钮', 'a-button')
    .setValue('按钮')
    .setIcon('lock')
    .setProps({
        type: 'primary',
        icon: 'el-icon-success',
        ghost: false,
        block: false
    })
    .setSlots({
        default() {
            return [text.clone().setValue(this.value)];
        }
    })
    .setEvents({
        click: 'this.submit()'
    })
    .clone();
button.afterCreate = function() {
    this.field = '';
    this.label = null;
}.bind(button);
// 附件上传
const upload = new FormItem('upload', '附件框', 'a-upload')
    .setValue([])
    .setIcon('upload')
    .setProps({
        multiple: true,
        action: 'http://'
    })
    .setSlots({
        default() {
            return [button.clone().setValue('上传附件')];
        }
    })
    .clone();
// 隐藏框
const hidden = new FormItem('hidden', '隐藏', 'input')
    .setIcon('close')
    .setProps({
        type: 'hidden'
    })
    .clone();
// 富文本
const rich = new FormItem('rich', '富文本', 'quill-editor').setIcon('form').clone();
// 表格
const list = new FormItem('list', '列表', 'form-table').setIcon('table').clone();
list.labelSpan = 0;
list.wrapperSpan = 24;
export default [row, col, hidden, text, input, number, date, time, dateRange, select, radioGroup, checkBoxGroup, upload, rich, list, button];
